import React, { useState, useEffect } from "react";
import "../visualFilecss/VisualInvestment.css";
import RentStatus from "./Investmentpages/RentStatus";
import PeopleFlow from "./Investmentpages/PeopleFlow";
import RentIncome from "./Investmentpages/RentIncome";
import BenefitSummary from "./Investmentpages/BenefitSummary";
import CompanyTypePie from "./Investmentpages/CompanyTypePie";
import axios from "axios";
const BORDERS_STYLE={
  border: "1px solid rgba(97, 168, 219, 0.8)",
  background: "rgba(9, 27, 55, 0.2)",
}
export default function VisualInvestment() {
  
  // 1. 实际租赁情况
  const [rentStatusData, setRentStatusData] = useState({
    rentable: 3490,
    pending: 87,
    rented: 2464,
    expiring: 26
  });
  // 2. 人员流量监控
  const [peopleFlowData, setPeopleFlowData] = useState({
    x: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    y: [200, 300, 400, 500, 600, 700, 800, 700, 600, 500, 400, 300]
  });
  // 3. 租金收入情况
  const [rentIncomeData, setRentIncomeData] = useState({
    x: ['11/20', '11/22', '11/24', '11/26', '11/28'],
    y: [200, 851, 150, 600, 400]
  });
  // 4. 当月收益汇总
  const [benefitSummaryData, setBenefitSummaryData] = useState({
    x: ['1日','5日','10日','15日','20日','25日','28日'],
    y: {
      '物业费': [120, 132, 101, 134, 90, 230, 210],
      '广告': [220, 182, 191, 234, 290, 330, 310],
      '出租': [150, 232, 201, 154, 190, 330, 410],
      '停车费': [320, 332, 301, 334, 390, 330, 320]
    }
  });
  // 5. 企业种类占比
  const [companyTypePieData, setCompanyTypePieData] = useState([
    { value: 9, name: '个人独资企业' },
    { value: 10, name: '私营企业' },
    { value: 12, name: '国有企业' },
    { value: 15, name: '联营企业' },
    { value: 20, name: '有限合伙企业' }
  ]);

  // 预留后端接口
  // useEffect(() => {
  //   axios.get('/api/rentStatus').then(res => setRentStatusData(res.data));
  //   axios.get('/api/peopleFlow').then(res => setPeopleFlowData(res.data));
  //   axios.get('/api/rentIncome').then(res => setRentIncomeData(res.data));
  //   axios.get('/api/benefitSummary').then(res => setBenefitSummaryData(res.data));
  //   axios.get('/api/companyTypePie').then(res => setCompanyTypePieData(res.data));
  // }, []);

  return (
    <div className="visualInvestment-bg">
      {/* 左侧统计卡片和图表 */}
      <div className="visualInvestment-left">
        <RentStatus data={rentStatusData}  style={{...BORDERS_STYLE}}/>
        <PeopleFlow data={peopleFlowData}  style={{...BORDERS_STYLE}} />
        <RentIncome data={rentIncomeData}  style={{...BORDERS_STYLE}} />
      </div>
      {/* 中间背景 */}
      <div className="visualInvestment-center">
        {/* 可用背景图片或3D楼宇 */}
      </div>
      {/* 底部区域 */}
      <div className="visualInvestment-bottom">
        <BenefitSummary data={benefitSummaryData}  style={{...BORDERS_STYLE}} />
        <CompanyTypePie data={companyTypePieData}  style={{...BORDERS_STYLE}} />
      </div>
    </div>
  );
}
